<template>
  <view class="list-money-list">
    <view class="list-money-row">
      <view class="list-money-col" v-for="item in products" :key="item.id">
        <view class="list-money-item" @click="$emit('add-to-cart', item)">
          <view style="margin:12px;">

            <image class="list-money-image" :src="item.goods_image" mode="aspectFill" />
            <view class="list-money-title">

              <view> {{ item.goods_name }}</view>


            </view>

            <view class="temperature-box">
              {{ item.rebate }}<text style="letter-spacing: 2rpx;margin-left: 2rpx;">福气值</text>
            </view>
            <view class="list-money-bottom" @click="$emit('add-to-cart', item)"
              style="position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%);">
              <img style="height: 66rpx;width: 336rpx;"
                src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17339105876759603b1e21e.png"
                alt="">
              <view class="list-money-price">
                <text class="list-money-value">¥{{ item.online_price }}</text>
              </view>
            </view>
          </view>

        </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductGrid',
  props: {
    products: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  emits: ['add-to-cart']
}
</script>



<style lang="scss" scoped>
.temperature-box {
  background-color: #C39646;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  color: #FFFFFF;
  /* 白色文字 */
  font-size: 20rpx;
  /* 文字大小 */
  height: 28rpx;
  text-align: center;
  padding: 5rpx;
  line-height: 28rpx;
  width: 50%;
  margin-top: 12rpx;
}

.list-money-list {
  padding: 12px;
  background-color: #fff;

  .list-money-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    .list-money-col {
      .list-money-item {
        height: 476rpx;
        width: 336rpx;
        background: #ffffff;
        border-radius: 18px;
        overflow: hidden;
        // padding: 8px 8px 0;
        border: 1px solid #E0B879;
        position: relative;

        .list-money-image {
          width: 100%;
          height: 272rpx;
          background: #f5f5f5;
          // border-radius: 8px;
        }

        .list-money-title {
          font-size: 14px;
          color: #333;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          // height: 80rpx;
          box-sizing: border-box;
          word-break: break-all;
          margin: 0;
        }

        .list-money-bottom {
          // background-image: url('https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17339105876759603b1e21e.png');
          // background-size: 100% 100%;
          // background-repeat: no-repeat;
          // background-position: bottom;
          display: flex;
          align-items: center;
          justify-content: space-between;
          // padding: 0 2px 10px;

          .list-money-price {
            flex-direction: column;
            position: absolute;
            top: 50%;
            left: 5%;
            transform: translateY(-50%);
            display: flex;
            align-items: baseline;
            color: #F2D3A3;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150rpx;

            .list-money-symbol {
              font-size: 12px;
              margin-right: 1px;
            }

            .list-money-value {
              font-size: 30rpx;
              font-weight: bold;
            }
          }

          .list-money-button {
            background: linear-gradient(to right, #FF8181, #FF5B5B);
            color: #fff;
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 15px;
            box-shadow: 0 2px 4px rgba(255, 91, 91, 0.2);
          }
        }
      }
    }
  }
}
</style>